<template>
    <el-card shadow="never" class="d-card">
         <template #header>
            <div class="card-header">
                <span>Quill富文本编辑器</span>
            </div>
        </template>
        <el-row>
            <el-col :span="12">
                <el-form
                    label-width="150px"
                    class="demo-ruleForm"
                    ref="ruleFormRef"
                    :model="ruleForm"
                >
                    <el-form-item label="活动名称" prop="name">
                        <el-input v-model="ruleForm.name" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="资源" prop="resource">
                        <el-radio-group v-model="ruleForm.resource">
                            <el-radio label="0">线上品牌赞助</el-radio>
                            <el-radio label="1">线下免费场地</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="活动类型" prop="type">
                        <el-checkbox-group v-model="ruleForm.type">
                            <el-checkbox label="0" name="type">线上活动</el-checkbox>
                            <el-checkbox label="1" name="type">促销活动</el-checkbox>
                            <el-checkbox label="2" name="type">线下活动</el-checkbox>
                            <el-checkbox label="3" name="type">品牌曝光</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="活动形式" prop="desc">
                        <el-input type="textarea"  v-model="ruleForm.desc" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="活动描述" prop="description">
                        <div>
                            <QuillEditor theme="snow" ref="myQuillEditor" v-model="ruleForm.description" style="width:676.5px;height:200px;" />
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary">创建</el-button>                        
                        <el-button>重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </el-card>
</template>

<script lang="ts" setup>
    import { reactive, onMounted, ref, onBeforeMount, defineAsyncComponent, getCurrentInstance, resolveDynamicComponent } from 'vue'
    import { QuillEditor } from '@vueup/vue-quill'
    import '@vueup/vue-quill/dist/vue-quill.snow.css';

    const myQuillEditor = ref<any>(null);

    const ruleForm = reactive({
        name: '测试活动',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: ['1', '3'],
        resource: '1',
        desc: '测试测试',
        description: 'ddd',
    });

    onMounted(() => {
        const quill = myQuillEditor.value;
        /*
        quill.setContents([
            { insert: 'Hello ' },
            { insert: 'World!', attributes: { bold: true } },
            { insert: '\n' }
        ]);
        */
    })
</script>